<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script type="text/javascript" src="./js/recorder.js"></script>

</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <button @click="audio">点击录音</button>
        <button @click="stopAudio">停止录音</button>
        <button @click="playAudio">播放录音</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Hello Vue.js!',
                    recorder: new Recorder({
                        sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16
                        sampleRate: 16000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
                        numChannels: 1,         // 声道，支持 1 或 2， 默认是1
                        compiling: false,       // 是否边录边转换，默认是false
                    }),
                };
            },

            methods: {
                audio() {
                    // 开始录音
                    console.log("start");
                    this.recorder.start().then(() => {
                        // 开始录音
                        const url = `ws://118.195.186.158:50080/wss/asr/v1/streaming_recognize`
                        let option = {
                            headers: {
                                Appid: "ld_yani_customer_640480",
                                Authorization: "e1LsOmGeDULFrdDfC1fk6DpnKjuuEc0O"
                            }
                        }
                        // var ws = new WebSocket(url, option);
                        var ws = new WebSocket(url);
                        ws.onopen =  (e)=> {
                            //成功连接服务器回调
                            console.log('客户端（client）：与服务器的连接已打开')
                            // 发送配置
                            let config = '{"interim_results":true,"config":{"language_code":"zh-cmn-Hans-CN","sample_rate_hertz":16000,"encoding":"LINEAR16"}}';
                            ws.send(config);
                            // ws.send(config);
                            this.recorder.onprogress = function (params) {
                                // console.log('录音时长', params.duration);
                                // console.log('已录音文件大小（字节）', params.fileSize);
                                // console.log('录音音量百分比', params.vol);
                                //Array<DataView> 
                                // dataviewArray = params.data
                                console.log('当前录音的总数据', params.data);
                                // ws.send(params.data);
                            }
                            
                           
                        }
                        ws.onmessage = (e)=> {
                            // console.log("-------onmessage---",e);
                            if (typeof e.data === "string") {
                                console.log("String message received", e.data);
                            } else {
                                console.log("Other message received", e, e.data);
                            }
                        }
                        ws.onerror = function (e) {
                            console.log("WebSocket Error: ", e);
                        };

                        ws.onclose = (e)=> {
                            console.log("-------close---，录音结束");
                            // stop();
                            this.stopAudio()
                        }
                    }, (error) => {
                        // 出错了
                        console.log(`${error.name} : ${error.message}`);
                    });
                },
                stopAudio() {
                    console.log("stop")
                    this.recorder.stop();
                },
                playAudio() {
                    console.log("play")
                    this.recorder.play();
                },
                playtest() {
                    console.log("start");
                    this.recorder.start().then(() => {
                        // 开始录音
                        this.recorder.onprogress = function (params) {
                            console.log('录音时长', params.duration);
                            console.log('已录音文件大小（字节）', params.fileSize);
                            console.log('录音音量百分比', params.vol);
                            console.log('当前录音的总数据', params.data);
                            console.log(params);
                        }
                        // this.recorder.onprocess = function (duration,data) {
                        //     console.log(duration);
                        //     console.log(data);
                        // }

                    }, (error) => {
                        // 出错了
                        console.log(`${error.name} : ${error.message}`);
                    });
                },
            }
        })
    </script>
</body>

</html>